import { useEffect, useState } from "react"

import { torem } from "../../assets/js/rem"

const Area = (props) => {
  const [whole, setWhole] = useState(0)

  useEffect(() => {
    let qb = 0
    Object.keys(props.data).forEach(i => {
      qb += props.data[i].length
    })
    setWhole(qb)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
  return (
    <div className="u-p-l-15 u-p-r-15" style={{ lineHeight: torem(48) }}>
      <div onClick={() => props.change('qb')} className="u-border-bottom">全部区域 ({whole})</div>
      {Object.keys(props.data).map((i, ind) => <div onClick={() => props.change(i)} className="u-border-bottom" key={ind}>{i} ({props.data[i].length})</div>)}
    </div>
  )

}

export default Area